<template>
  <div class="page">
    <!-- vue的插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定, 实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示 -->
    <h2 class="title">单个插槽</h2>
    <demo1>
      <div>我是父组件的内容</div>
    </demo1>
    <h2 class="title">具名插槽</h2>
    <demo2>
      <div slot="header">我是头部</div>
      <span>我是父组件</span>
      <span>验证插槽</span>
      <div slot="footer">我是底部</div>
    </demo2>
    <h2 class="title">作用域插槽</h2>
    <demo3>
      <template slot-scope="scope">
        <p>{{scope.ite}}</p>
      </template>
    </demo3>
  </div>
</template>

<script>
import Demo1 from './components/demo1'
import Demo2 from './components/demo2'
import Demo3 from './components/demo3'
export default {
  components: {
    Demo1,
    Demo2,
    Demo3
  },
  data () {
    return {

    }
  }
}
</script>

<style scoped lang="scss">
.title {
  line-height: 50px;
  font-weight: 600;
}
</style>
